<template>
  <div class="search-container">
    <el-card class="search-card" shadow="hover">
      <div class="card-header">
        <i class="el-icon-search"></i>
        <span>搜索</span>
      </div>
      
      <div class="search-content">
        <el-form :model="searchForm" label-width="100px" size="small">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="订单编号">
                <el-input v-model="searchForm.order_id" placeholder="输入多个订单编号，用逗号分隔" clearable></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="8">
              <el-form-item label="用户名">
                <el-input v-model="searchForm.username" placeholder="输入多个用户名，用逗号分隔" clearable></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="8">
              <el-form-item label="产品名称">
                <el-input v-model="searchForm.product_name" placeholder="输入产品名称" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <div class="form-actions">
            <el-button type="primary" @click="handleSearch" :loading="loading">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button @click="resetForm">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderSearch',
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchForm: {
        order_id: '',
        username: '',
        product_name: ''
      }
    }
  },
  methods: {
    handleSearch() {
      const params = { ...this.searchForm }
      this.$emit('search', params)
    },
    resetForm() {
      this.searchForm = {
        order_id: '',
        username: '',
        product_name: ''
      }
      this.$emit('reset')
    }
  }
}
</script>

<style scoped>
.advanced-search-container {
  margin-bottom: 20px;
}

.search-card {
  background-color: #f8f9fa;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #409EFF;
}

.card-header i {
  margin-right: 8px;
}

.search-content {
  padding: 10px 0;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.form-actions .el-button {
  margin: 0 10px;
}

.full-width {
  width: 100%;
}

.text-center {
  text-align: center;
  line-height: 40px;
}
</style>
